<template>
  <div
    class="draggable-image"
    :style="{ paddingLeft: pagePadding + 'px', paddingRight: pagePadding + 'px', marginBottom: imgMargin + 'px' }"
  >
    <img
      class="active-img"
      :class="{ radius: borderRadius, shadow: imgStyle === 2 }"
      :src="src||backgroundImg"
      alt=""
    />
    <span class="title" v-show="title">{{ title }}</span>
  </div>
</template>

<script>
  export default {
    name: 'DraggableImage',
    props: {
      src: {
        type: String,
        default: ''
      },
      title: {
        type: String
      },
      imgStyle: {
        type: Number
      },
      borderRadius: {
        type: Boolean
      },
      pagePadding: {
        type: Number
      },
      imgMargin: {
        type: Number
      }
    },
    data () {
      return {
         backgroundImg: 'https://img.yzcdn.cn/public_files/2019/03/05/2b60ed750a93a1bd6e17fc354c86fa78.png!large.webp'
      }
    }

  }
</script>

<style lang="less" scoped>
.draggable-image{
  width: 375px;
  height: 200px;
  position: relative;
  /*border: 1px solid blue;*/
  .active-img{
    width: 100%;
    height: 100%;
    &.radius {
      border-radius: 10px;
    }
    &.shadow {
      box-shadow: 5px 5px 5px #888888;
    }
  }
  .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 35px;
    height: 35px;
    color: #ffffff;
    text-align: center;
    background-color: RGBA(0, 0, 0, .5);
  }
}
</style>
